<template>
  <div class="myaside">
    <div class="myaside-title">
      <img :src="is_subject=='yx'?yxlogo:is_subject=='mz'?mzlogo:logo" alt />
    </div>
    <div class="myaside-div">
      <div class="myaside-div-list">
        <div
          class="myaside-div-list-mode"
          v-for="item in oneList"
          :key="item.id"
          @mouseenter="enter(item)"
        >
          <img :src="defaultID == item.id ? item.mouse_icon : item.icon" alt />
        </div>
      </div>
      <ul
        class="myaside-div-right"
        v-infinite-scroll="load"
        style="overflow:auto"
        @mouseleave="leave($event)"
        v-if="isTrue && unique == 'Search'"
      >
        <div>
          <el-input
            placeholder="搜索你想要的菜单功能"
            style="margin-top:40px"
            v-model="value"
            @input="querySearch"
          ></el-input>
          <ul
            class="myaside-div-right-searchmodel"
            v-infinite-scroll="load"
            style="overflow:auto"
            v-if="isInputSearch"
          >
            <div
              v-for="(item) in searchListSel"
              :key="item.id"
              @click="onSearchName(item)"
              class="pointer"
            >{{ item.name }}</div>
          </ul>
        </div>
      </ul>
      <ul
        class="myaside-div-right"
        v-infinite-scroll="load"
        style="overflow:auto"
        @mouseleave="leave()"
        v-if="isTrue && unique != 'Search'"
      >
        <template v-if="istrue">
          <template v-for="item in list">
            <div class="myaside-div-right-mode" :key="item.id" v-if="item.sid == defaultID">
              <div>{{ item.name }}</div>
              <div class="pointer">
                <div v-for="e in item.list" :key="e.id" @click="onRouter(e)">
                  <img
                    :src="e.icon ? e.icon : 'https://ssy.13yu.com/Uploads/2022-02-09/62031f6b874ae.png'"
                    alt
                  />
                  <span>{{ e.name }}</span>
                </div>
              </div>
            </div>
          </template>
        </template>

        <div v-else style="margin-top:200px">暂无权限，请联系管理员开通。</div>
      </ul>
    </div>
  </div>
</template>

<script>
import { getStore } from "@/utils/localStorage.js";
import {
  postAdminUserCompetencelisttop
} from "@/api";
import logo from "@/assets/images/logo.png";
import yxlogo from "@/assets/images/yxlogo.png";
import mzlogo from "@/assets/images/mzlogo.png";
import logo1 from "@/assets/logo.png";
export default {
  props: ["browserHeight"],
  data() {
    return {
      logo,
      yxlogo,
      mzlogo,
      logo1,
      isTrue: false,
      isInputSearch: false,
      value: "",
      defaultActive: "",
      defaultID: "",
      unique: "",
      list: [],
      oneList: [],
      searchList: [],
      istrue: false,
      searchListSel: [],
      is_subject:"",
    };
  },
  mounted() {
    this.list = getStore("userinfo").roletop
    this.is_subject = getStore("userinfo").is_subject
    this.postAdminUserCompetencelisttop()
    this.onSearchList()
  },
  methods: {
    //ul 滚动组件回调事件
    load(){

    },
    querySearch(queryString, cb) {
      console.log(queryString, cb);
      var restaurants = this.searchList;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      console.log("results", results);
      if (queryString) {
        this.searchListSel = this.searchList
      }
      this.searchListSel = results
      this.isInputSearch = true
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    // onInputSearch(e){
    //   console.log("inputeeeee",e);
    // },
    enter(e) {
      let { list } = this
      this.isTrue = true
      this.defaultID = e.id
      this.unique = e.unique
      let istrue = list.some(item => item.sid == e.id)
      this.istrue = istrue
    },
    leave(e) {
      this.isTrue = false
      this.defaultID = ""
      this.unique = ""
      this.value = ""
    },
    onSearchList() {
      let list = getStore("userinfo").roletop
      let arr = []
      list.forEach(e => {
        arr.push(...e.list)
      })
      this.searchList = arr
    },
    onSearchName(e) {
      this.value = e.name
      let qxobj = {}
      e.qx.forEach(element => {
        qxobj[element.rolekey] = 1
      })
      qxobj = JSON.stringify(qxobj)
      this.$router.push({ name: e.unique, query: { qxobj } })
      this.value = ""
      this.isTrue = false
      this.isInputSearch = false
    },
    // 路由跳转
    onRouter(e) {
      let qxobj = {}
      e.qx.forEach(element => {
        qxobj[element.rolekey] = 1
      })
      qxobj = JSON.stringify(qxobj)
      this.$router.push({ name: e.unique, query: { qxobj } })
    },
    postAdminUserCompetencelisttop() {
      let form = {
        type: 0,
        status: "",
        name: "",
        is_top: 1,
        page: 1,
        size: 999,
      }
      postAdminUserCompetencelisttop(form).then(res => {
        this.oneList = res.data
      })
    },
  },
  updated() {
    this.defaultActive = this.$route.name;
  },
  watch: {
    "$route.name"(val) {
      this.defaultActive = val;
    },
    "$store.state.isCollapse": function (val) {
      this.isCollapse = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.iconColor {
  font-size: 20px;
  margin-right: 20px;
}
.el-menu {
  border: 0;
}
.myaside {
  background: #2c70d6;
  overflow: hidden;
  width: 60px;
  &-title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding-bottom: 20px;
    padding-top: 20px;
    // text-align: center;
    // line-height: 60px;
    // color: $global-text-color;
    > img {
      width: 40px;
    }
  }
  .myaside-div {
    display: flex;
    .myaside-div-list {
      width: 60px;
      display: flex;
      flex-direction: column;
      .myaside-div-list-mode {
        width: 100%;
        height: 70px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        > img {
          width: 100%;
        }
        // > div {
        //   color: #ffffff;
        //   font-size: 12px;
        //   margin-top: 6px;
        // }
      }
    }
    .myaside-div-right {
      background: #ffffff;
      max-width: 800px;
      min-width: 260px;
      height: 100vh;
      position: fixed;
      z-index: 999;
      top: -15px;
      left: 60px;
      z-index: 99999;
      box-shadow: 2px 0px 15px 2px rgba($color: #000000, $alpha: 0.1);
      display: flex;
      flex-wrap: wrap;
      .myaside-div-right-searchmodel {
        margin-top: 6px;
        background: #ffffff;
        width: 160px;
        height: 200px;
        box-shadow: 2px 2px 15px 2px rgba($color: #000000, $alpha: 0.1);
        padding-top: 20px;
        > div {
          font-size: 14px;
          height: 24px;
          line-height: 24px;
          color: #666;
        }
      }
      .myaside-div-right-mode {
        width: 220px;
        padding: 60px 0 20px;
        margin: 0 20px;
        border-bottom: 1px solid #ededed;
        > div:nth-child(1) {
          font-size: 18px;
          font-weight: 800;
          padding-bottom: 20px;
        }
        > div:nth-child(2) {
          > div {
            height: 40px;
            display: flex;
            align-items: center;
            font-size: 14px;
            margin-left: 20px;
            > img {
              width: 14px;
              height: 14px;
              margin-right: 5px;
            }
          }
        }
      }
    }
  }

  // &-mymenu {
  //   height: calc(100vh - 60px);
  // }
}
</style>
